import React from "react";

export default class StateCom extends React.Component {
  /*
                                                                      组件中的状态 state
                                                                      不使用操作Dom改变页面元素 ， 使用state进行处理
                                                                       */
  constructor(props) {
    super(props);
    // 定义状态
    this.state = {
      count: 10,
      text: "我是ract组件的state",
      flag: true,
    };
  }

  toReduce() {
    this.setState({ count: (this.state.count -= 1) });
  }

  increment() {
    this.setState({ count: (this.state.count += 1) });
  }

  clickThisHandle = () => {
    console.log(this); // 指代组件this
    this.setState({ count: (this.state.count *= 3) });
  };
  clickFlag = () => {
    this.setState({ flag: (this.state.flag = !this.state.flag) });
  };

  render() {
    let showView = this.state.flag ? "state的flag为false" : "state的flag为true";
    return (
      <div>
        <h2>组件的state学习</h2>
        <p>{this.state.count}</p>
        <button onClick={this.increment.bind(this)}>增加</button>
        <button onClick={this.toReduce.bind(this)}>减少</button>
        <button onClick={this.clickThisHandle}>乘法</button>
        <p>{showView}</p>
        <button onClick={this.clickFlag}>改变视图</button>
      </div>
    );
  }
}
